<template>
  <div class="box">
    <el-form :model="form" label-width="120px" v-loading="loading" status-icon :rules="rules" ref="formRef">
      <div style="display: inline-block">
        <el-form-item label="花名" prop="name">
          <el-input v-model="form.name" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="别称" prop="otherName">
          <el-input v-model="form.otherName" style="width: 400px;" />
        </el-form-item>
      </div>
      <div style="display: block;">
        <el-form-item label="图片" prop="picture">
          <el-image class="flowerPicture" :src="form.picture" fit="contain"/>
          <el-input v-model="form.picture" style="width: 1000px;"/>
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="产地" prop="origin">
          <el-input v-model="form.origin" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="水分" prop="moisture">
          <el-input v-model="form.moisture" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="花期" prop="florescence">
          <el-radio-group v-model="form.florescence">
            <el-radio label="春" />
            <el-radio label="夏" />
            <el-radio label="秋" />
            <el-radio label="冬" />
          </el-radio-group>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="日照" prop="sunshine">
          <el-input v-model="form.sunshine" style="width: 400px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block;">
        <el-form-item label="温度" prop="temperature">
          <el-input v-model="form.temperature" style="width: 400px;" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="土壤要求" prop="soil">
          <el-input v-model="form.soil" style="width: 1000px;" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="花语" prop="language">
          <el-input v-model="form.language" style="width: 1000px;" />
        </el-form-item>
      </div>
      <el-form-item label="栽种" prop="plant">
        <el-input v-model="form.plant" type="textarea" style="width: 1000px" rows="5" />
      </el-form-item>
      <el-form-item label="施肥" prop="manure">
        <el-input v-model="form.manure" type="textarea" style="width: 1000px" rows="5" />
      </el-form-item>
      <el-form-item label="浇水" prop="water">
        <el-input v-model="form.water" type="textarea" style="width: 1000px" rows="5" />
      </el-form-item>
      <el-form-item label="温度、光照" prop="temperatureLight">
        <el-input v-model="form.temperatureLight" type="textarea" style="width: 1000px" rows="5" />
      </el-form-item>
      <el-form-item label="防护" prop="protect">
        <el-input v-model="form.protect" type="textarea" style="width: 1000px" rows="5" />
      </el-form-item>
      <el-form-item label="繁殖" prop="breed">
        <el-input v-model="form.breed" type="textarea" style="width: 1000px" rows="5" />
      </el-form-item>
      <el-form-item label="小贴士">
        <el-input v-model="form.tip" type="textarea" style="width: 300px;" rows="3" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onInsert">插入</el-button>
        <el-popconfirm @confirm="clearAll" title="确认清空">
          <template #reference>
            <el-button>清空</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { createFlowerKnowledge } from "@/api/flowerKnowledge";
import { ElMessage } from 'element-plus';
export default {
  name: "flowerKnowledgeInsert",
  data() {
    return {
      // do not use same name with ref
      form: reactive({
        name: '',
        otherName: '',
        origin: '',
        florescence: '',
        sunshine: '',
        temperature: '',
        soil: '',
        moisture: '',
        language: '',
        plant: '',
        manure: '',
        water: '',
        temperatureLight: '',
        protect: '',
        breed: '',
        tip: '',
        picture: '',
      }),
      loading: false,
      rules:{
        name:[
          {required: true, message: '请输入花名', trigger: 'blur'}
        ],
        otherName: [
          {required: true, message: '请输入别名', trigger: 'blur'}
        ],
        origin: [
          {required: true, message: '请输入产地', trigger: 'blur'}
        ],
        florescence: [
          {required: true, message: '请选择花期', trigger: 'blur'}
        ],
        sunshine: [
          {required: true, message: '请输入适宜日照', trigger: 'blur'}
        ],
        temperature: [
          {required: true, message: '请输入适宜温度', trigger: 'blur'}
        ],
        soil: [
          {required: true, message: '请输入土壤要求', trigger: 'blur'}
        ],
        moisture: [
          {required: true, message: '请输入水分条件', trigger: 'blur'}
        ],
        language: [
          {required: true, message: '请输入花语', trigger: 'blur'}
        ],
        plant: [
          {required: true, message: '请输入种植条件', trigger: 'blur'}
        ],
        manure: [
          {required: true, message: '请输入施肥条件', trigger: 'blur'}
        ],
        water: [
          {required: true, message: '请输入浇水条件', trigger: 'blur'}
        ],
        temperatureLight: [
          {required: true, message: '请输入光照条件', trigger: 'blur'}
        ],
        breed: [
          {required: true, message: '请输入繁殖方式', trigger: 'blur'}
        ],
        protect: [
          {required: true, message: '请输入防护条件', trigger: 'blur'}
        ],
        picture: [
          {required: true, message: '请插入图片', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    //提交修改
    onInsert() {
      if (this.checkInput()) {
        this.loading = true
        const data = this.form;
        return createFlowerKnowledge(data)
          .then((response) => {
            this.$emit('insertSuccess');
            ElMessage.success("插入成功");
            this.clearAll();
            this.loading = false;
          })
          .catch((error) => {
            ElMessage.error("插入失败");
            console.log(error);
          });
      }

    },

    clearAll() {
      this.form = {
        name: '',
        otherName: '',
        origin: '',
        florescence: '',
        sunshine: '',
        temperature: '',
        soil: '',
        moisture: '',
        language: '',
        plant: '',
        manure: '',
        water: '',
        temperatureLight: '',
        protect: '',
        breed: '',
        tip: '',
        flowerPicture:'',
      }
    },

    //检查输入
    checkInput() {
      if (this.form.name === '') {
        ElMessage.warning("请填写花名！");
        return false;
      }
      return true;
    },

  },
}


</script>

<style scoped>
.box {
  width: 1200px;
  display: inline-block;
}
.flowerPicture{
  border: solid 5px lightgray;
  width: 500px;
  height: 300px;
}
</style>